<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>外边距合并问题</title>
		<style>
			/*父级元素设置：宽高，边框*/
			div.parent{
				width:300px ;
				height:300px ;
				/*填充：没有空间*/
				background-color: #a7a7a7;
				/*上外边距：100px*/
				border: 1px solid red;
				margin-top: 110px;
				/*推荐：找到父级元素加溢出隐藏，父级元素隐藏，余出空间，正常加外边距*/
				overflow: auto;
				/*建议：找到父级元素加边框，有空间*/
				border: 1px solid transparent;
				/*不推荐：内边距占空间，找到发生问题的位置*/
				padding-top: 1px;
			}
			div.son{
			width:100px ;
			height: 100px;
			background-color: #f00;
			/*上外边距：40px*/
			margin-top: 110px;
			}
			/*以上【外边距垂直合并】2.【内部】外边距垂直会合并，最大值为准
			                        解决方案：①溢出隐藏，转换为块级上下文结构
									找出父元素添加overflow：hidden或auto
									②加1个像素，透明边框，具体的位置内边距
									找到父元素添加：border或者padding
			*/
		</style>
	</head>
	<body>
		<div class="parent"></div>
		<div class="son"></div>
	</body>
</html>